<template>
    <div class="sendDiary">
        <myHeader :back="true" title="发布游记"></myHeader>
        <van-steps :active="active" direction="vertical" @click-step="onstep">
            <van-step>
                <h3>第一步</h3>
                <p>记录地点时间</p>
            </van-step>
            <van-step>
                <h3>第二步</h3>
                <p>记录旅游特点</p>
            </van-step>
            <van-step>
                <h3>第三步</h3>
                <p>记录旅游感受</p>
            </van-step>
        </van-steps>
        <div class="changeBoxOne" v-if="active == 0">
            <van-cell-group inset>
                <van-field v-model="titleValue" label="游玩标题" placeholder="请输入" label-align="top" left-icon="smile-o"
                    @blur="fieldPartOne" />
                <van-field v-model="addressValue" label="游玩地点" placeholder="请输入" label-align="top" left-icon="smile-o"
                    @blur="fieldPartTwo" />
                <van-field v-model="date" label="游玩日期" placeholder="请选择日期" label-align="top" left-icon="smile-o"
                    @click="showPopup" />
            </van-cell-group>
        </div>
        <div class="changeBoxTwo" v-if="active == 1">
            <p>游玩标签<span>(最多6个)</span></p>
            <div class="tagChoose">
                <van-tag plain class="tags" v-for="(item, index) in tagNewList" @click="onTags(item,index)"  color="#7232dd" :key="index">{{ item.label
                }}</van-tag>
            </div>
            <div class="imgUpload">
                <p>游玩图片<span>（最少1张，最多9张）</span></p>
                <van-uploader v-model="fileList" multiple :max-count="9" />
            </div>
        </div>
        <div class="changeBoxThree" v-if="active == 2">
            <p>游记感受<span>（用心记录）</span></p>
            <div class="content">
                <van-cell-group inset>
                    <van-field class="filed" v-model="message" rows="2" autosize type="textarea" maxlength="200"
                        placeholder="请输入游记感受" show-word-limit />
                </van-cell-group>
            </div>
        </div>
        <div class="btn">
            <van-button type="success" @click="preStep" :disabled="active == 0 ? true : false">上一步</van-button>
            <van-button type="success" @click="nextStep">{{ active == 2 ? "提交吧！" : "下一步" }}</van-button>
        </div>
        <!-- <van-cell center title="游玩日期" value=">" :label="date" @click="showPopup" /> -->
        <van-popup v-model:show="isShow" position="bottom">
            <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm"
                @cancel="onCancel" />
        </van-popup>
    </div>
</template>

<script setup>
import { isShallow, reactive, ref } from 'vue';
import { tagList } from '@/utils/tags.js';
import { addTravelsAPI } from "../../api/sendDiary"

const isShow = ref(false);
const active = ref(0);
const count = ref()
const titleValue = ref();
const addressValue = ref();
const date = ref()
const tagNewList = ref([...tagList])
const indexList = ref([])
// const flag = ref(false)
const params = reactive({
    title: '',
    address: '',
    data: null,
    tags: [],
    imgs: [],
    content: '',
})
const currentDate = ref(['2021', '05', '15']);
const columnsType = ['year', 'month', 'day'];

const onTags = (item,index)=>{
    console.log(item);
    console.log(index)
    console.log(tagNewList);
    // flag.value = true
    // tagNewList.push
    let res=tagNewList.value.forEach(v=> v.label)
    console.log(res);
}
const fieldPartOne = () => {
    if (titleValue.value) {
        count.value = 1
        params.title = titleValue.value
    }
}
const fieldPartTwo = () => {
    if (addressValue.value) {
        count.value = 2
        params.address = addressValue.value
    }
}
const onConfirm = (selectedValues, selectedOptions) => {
    console.log(selectedValues);
    date.value = selectedValues.selectedValues
    // console.log(date.value[0]+'年'+data.value[1]+'月'+data.value[2]+'日');
    isShow.value = false
    if (data.value != '') {
        count.value = 3,
            params.data = data.value
    }
}
const onCancel = (selectedValues, selectedOptions) => {
    isShow.value = false;
    data.value = null

}
const data = reactive({
    minDate: new Date(2000, 0, 1),
    maxDate: new Date()
})
const showPopup = () => {
    isShow.value = true
}
const preStep = () => {
    active.value--
}
const nextStep = () => {
    console.log(count.value);
    active.value++
    if (count.value == 3) {
        console.log("全部输入");
    }
}
const afterRead = (file) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
};
</script>

<style lang="scss" scoped>
.sendDiary {
    width: 100%;
    height: 100%;

    .btn {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        justify-content: space-evenly;
    }

    .changeBoxOne,
    .changeBoxTwo,
    .changeBoxThree {
        height: 40%;
    }

    .changeBoxTwo {
        width: 95%;
        margin: auto;
        padding: 0.10rem;

        p {
            font-weight: 300;
            line-height: 2;

            span {
                font-size: 0.16rem;
            }
        }

        .tagChoose {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .tags {
                display: inline-block;
                margin: 0.1rem 0.15rem 0.1rem;

            }
        }
    }

    .changeBoxThree p {
        text-indent: 2;
        font-weight: 300;
        line-height: 2;

        span {
            font-size: 0.16rem;
        }
    }
}
</style>